<template>
    <div class="organ-search">
        <el-input v-model="state.keyword" placeholder="输入机构名称搜索" :suffix-icon="Search" />
    </div>
    <div class="tree-box">
        <el-tree ref="treeRef" :data="data" :props="props" node-key="id" @node-click="onNodeClick">
            <template #default="scope">
                <div class="custom-node">
                    <SvgIcon :name="scope.node.data.icon" />
                    <span>{{scope.node.label}}</span>
                </div>
            </template>
        </el-tree>
    </div>
</template>
<script lang="ts" setup name="GroupTree">

import { nextTick, ref, reactive, onMounted } from 'vue'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { Search } from "@element-plus/icons-vue";
import { queryTree } from "/@/api/workflow/group";

//数据
const state = reactive({
    keyword: ''
})

const data = ref({});


interface Tree {
    name: string
    leaf?: boolean
}

const treeRef = ref<InstanceType<typeof ElTree>>()

const props = {
    label: 'name',
    children: 'children',
    isLeaf: 'leaf',
}

const emit = defineEmits(['nodeClick'])
const onNodeClick = (data:any, node:any) => {
    emit('nodeClick', data)
}

const loadNode = async () => {
    const res: any = await queryTree(null);
    if(res && res.code === 0) {
        data.value = res.data
        emit('nodeClick', res.data[0])//默认点击第一个
    }
}

onMounted(() => {
    loadNode();
})

</script>
<style lang="scss" scoped>
.organ-search {
    padding: 16px;
    width: 100%;
}
.tree-box {
    padding: 12px 0px;
}
</style>